<template>
    <div class="other">
      <el-switch
        v-model="isDark"
        inline-prompt
        active-color="#0a0a0a"
        inactive-color="#dcdfe6"
        :active-icon="Sunny"
        :inactive-icon="Moon"
        @change="onAddDarkChange"
      />
      <el-color-picker
        v-model="themeConfig.primary"
        :predefine="PRESET_COLOR_LIST"
        @change="changePrimary"
      >
      </el-color-picker>
    </div>
  </template>
  
  <script setup lang="ts">
  import { PRESET_COLOR_LIST } from "@/config/constant";
  import { GlobalStore } from "@/store";
  import { Sunny, Moon } from "@element-plus/icons-vue";
  import { useDark, useToggle } from "@vueuse/core";
  import { useTheme } from "@/hooks/useTheme";
  
  const isDark = useDark();
  
  // 主题初始化
  const globalStore = GlobalStore();
  const themeConfig = computed(() => globalStore.themeConfig);
  const { changePrimary } = useTheme();
  
    const onAddDarkChange = (val: any) => {
      useToggle(isDark)
  };
  </script>
  
  <style scoped lang="scss">
  </style>
  